<script lang="ts" setup name="BrandDialog">
import { FormInstance } from 'element-plus'
import { Information } from '~/src/api/interface/information'

const rules = reactive({
  name: [{ required: true, message: '请填写品牌名称' }],
})

interface DialogProps {
  title: string
  isView: boolean
  row: Partial<Information.BrandList>
  api?: (params: any) => Promise<any>
  getTableList?: () => void
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  isView: false,
  title: '',
  row: {},
})

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params
  dialogVisible.value = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.row)
      ElMessage.success({ message: `${dialogProps.value.title}品牌成功！` })
      dialogProps.value.getTableList!()
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="dialogVisible" :title="dialogProps.title + '品牌资料'" :width="600">
    <el-form
      ref="ruleFormRef"
      :disabled="dialogProps.isView"
      :hide-required-asterisk="dialogProps.isView"
      label-suffix=" :"
      label-width="100px"
      :model="dialogProps.row"
      :rules="rules"
    >
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="dialogProps.row!.name" clearable placeholder="请填写" />
      </el-form-item>
      <el-form-item label="是否显示" prop="isShow">
        <el-radio-group v-model="dialogProps.row!.isShow">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
